<template>
  <div class="container">
    <h1>意见和建议列表</h1>

    <div>
      <el-input
        v-model="keyword"
        placeholder="请输入内容"
        style="width: 300px"
        clearable
      />
      <el-button type="primary" @click="getTable">搜索</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="填写人" width="180" />
      <el-table-column prop="name" label="填写时间" width="180" />
      <el-table-column prop="address" label="内容概览" />
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button type="text" @click="look(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reqGetSuggestionList } from "@/api/api";

const page = ref(1);
const keyword = ref("");
const tableData = ref([{}]);
const look = (row: any) => {
  console.log(row);
};

const getTable = async () => {
  const res = await reqGetSuggestionList({
    page: page.value,
    pageSize: 10,
    keyword: keyword.value,
  });
  tableData.value = res.data.data;
};

onMounted(() => {
  getTable();
});
</script>

<style scoped>
.container {
  padding: 40px 150px;
}
</style>
